/*
用户输入的相关信息
*/
var messageInputOfUser = document.getElementsByTagName("textarea")[0],
    classNameOfUser = "message-list__item message-list__item-user";
/*


机器人输入的相关信息
*/
classNameOfRobot = "message-list__item message-list__item-robot";
function MsgOfServer(method, url, data, cb) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url);

  xhr.onreadystatechange = function () {
    // readyState 为 4 时表示已经全部接收到响应数据
    if (xhr.readyState === 4) {
      // Http 状态码大于等于 200 小于 300，或者等于 304，表示请求成功
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        cb(xhr.responseText);
      } else {
        cb(null);
      }
    }
  };

  xhr.send(data);
}

/*
信息发送到界面
 */
function sendMessage(nodeClassname, messageInput) {
    /*会话列表的获取*/
    var msgList = document.getElementsByClassName("message-list")[0];   //会话列表
    /*创建父节点*/
    var messageNode = document.createElement("li");       //创建父节点
    messageNode.className = nodeClassname; //给父节点创建类型
    /*创建子节点*/
    var childNode = document.createElement("div");  //创建子节点
    childNode.innerText = messageInput
    /*子节点添加到父节点上*/
    messageNode.appendChild(childNode);
    /*父节点添加到界面*/
    msgList.appendChild(messageNode);
    /*让当前元素自动滚动到可见位置*/
    messageNode.scrollIntoView(false);
}

/*
点击发送按钮时执行命令
*/
sendMsgButton = document.getElementsByTagName('button')[0]  //获取点击按钮；
/*
定义点击时执行的函数命令
*/
function eventOfButtonClick() {
    //待发送到界面的消息
    var msgOfUser = messageInputOfUser.value;
    //清空输入框
    messageInputOfUser.value = '';
    //发送用户消息
    sendMessage(classNameOfUser, msgOfUser);
    //发送机器人的消息
    MsgOfServer(
        //请求方法
        'GET',
        // 拼接 url
        'http://xhxly.cn:8080/api.php?key=free&appid=0&msg=' + msgOfUser,
        //请求body里的data
        null,
        // 数据返回的回调函数
        function(res) {
          // 获取实际对话内容，返回的数据是字符串,需要用JSON.parse把字符串转换成对象
          var robotMsg = JSON.parse(res).content;
          // 将返回信息添加到对话列表
          sendMessage(classNameOfRobot, robotMsg);
        }
      );
}
//监听事件
sendMsgButton.addEventListener("click", eventOfButtonClick);
//enter发送消息，shift+enter换行
document.onkeydown = function (e) {
    e=e||window.event   //IE中的事件
    //enter发送消息，shift+enter换行
    if (!e.shiftKey && e.keyCode == 13) {
      e.cancelBubble = true;
      e.preventDefault();   
      e.stopPropagation();
      eventOfButtonClick();
    }
}

/*
写在最后的话：
1.此次编写过程中，对变量messageInputOfUser直接取messageInputOfUser = document.getElementsByTagName("textarea")[0].value将会导致输入的信息不会被显示
-原因：根据分析应该是如果直接取值的话，在程序运行主函数之后，该变量初始值为零，随着该变量一直被清空，变量的值将始终为零
2.此次编程过程中发现一个应该注意的问题：对于script部分的位置应当置于body主体函数之后
3.在机器人输入的相关信息这一部分中，如果采用匿名函数定义的形式，例如：
var messageInputOfRobot= function(){
    var messageOfRobot = [
        '我是小冰，你好啊',
        '今天天气不错哎，小冰想跟主人一起去游荡',
        '小冰竭诚为你服务',
        '主人，你需要来首轻松的歌曲放松一下么',
        '主人，有何吩咐哇?'
    ];  //聊天机器人的会话选择
    var randNum = Math.floor(Math.random() * 4);
    return messageOfRobot[randNum];
}将导致函数体代码块自身被打印到聊天界面
-原因：具体原因尚不明确，等待继续研究观察。
4.在调用那些函数形式参数含有函数参数形式的函数的时候，应该做到在函数内部调用传入的函数的时候，保证函数原型和内部调用的函数形式对应，
其次，最好直接在函数调用时括号里面对函数进行复合字面量的使用，因为这样创建是一个具有函数原型作用域的参数（调用完就释放内存。）
5.一定要注意函数调用func与返回值func（）的区别，在传递参数的时候一定要注意。
*/
